<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ include file="/page/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%@ include file="/adapter/adapter-bootstrap.jsp" %>
<title>APP用户地区分析</title>
<script src="${ctx}/js/esl/esl.js"></script>
<script type="text/javascript">
function  goBack(){
	window.history.back(-1);
}

function init(){
	  
}

  
</script>
</head>
<body  onload="init()">
<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">
      APP用户地区分析
      </h3>
   </div>
   <div class="panel-body" style="text-align: center;">
		<div id="chinaMap"style="height:400px;margin:0 auto;text-align: center;"></div>
		<div id="detail" style="height:100px;border:2px solid yellow;text-align: left;">
			<span style="font-family: 华文行楷;font-size: 18px;margin: 10px;">前10个登陆用户数量最大的省份：</span><br/>
			<!-- <span style="margin-left: 10px;">北京：947，天津：735，上海：714，重庆：681，河北：475，河南：369，云南：322，辽宁：252，黑龙江：241，湖南：128。</span> -->
			<span style="margin-left: 10px;">${detail}</span>
		</div>
		<script type="text/javascript">
    //为模块加载器配置echarts的路径，这里主要是配置map图表的路径，其他的图表跟map的配置还不太一样，下边也会做另一种类型的图表事例。  
	//这里引用的主要是echarts文件夹下的echarts-map文件，而其他类型的图表引用的都是echarts文件夹下的echarts文件。  
		var fileLocation = '${ctx}/js/echarts-map';
		require.config({
			paths : {
				'echarts' : fileLocation,
				'echarts/chart/map' : fileLocation
			}
		});
		// 作为入口， 动态加载echarts，在回掉函数中使用，要注意保持按需加载结构定义图表路径
		require(
				[ 
				  'echarts', 
				  'echarts/chart/map' 
				 ], 
				 displayChart);
		
		function displayChart(ec) {
			chinaMapChart = ec.init(document.getElementById('chinaMap'));
			chinaMapChart.setOption(getChinaMapChartOption());
		}
		//获得地图的选项和数据
		function getChinaMapChartOption() {
			//chinaMapChartOption主要是图标的一些设置
			var chinaMapChartOption = {
					
				title : {
					text : '各省登陆用户数量分布情况',
					//subtext : '用户注册情况',
					x : 'center'
				},
				
				tooltip : {
					trigger : 'item'
				},
				
				legend : {
					orient : 'vertical',
					x : 'left',
					data : [ '人数' ]
				},
				
				dataRange : {
					min : 0,
					max : <%=request.getAttribute("maxCount")%>,
					text : [ '高', '低' ], // 文本，默认为数值文本
					color: ['#d94e5d','#ffff99'],
					calculable : true,
					textStyle : {
						color : 'orange'// 文本color
					}
				},
				
				toolbox : {
					show : true,
					orient : 'vertical',
					x : 'right',
					y : 'center',
					feature : {
						mark : true,
						dataView : {
							readOnly : false
						},
						restore : true,
						saveAsImage : true
					}
				},

				series : [
				  {
					name : '人数',
					type : 'map',
					mapType : 'china',
					selectedMode : 'single',
					itemStyle : {
						normal : {
							label : {
								show : true
							},
							color : '#ffd700'    //选中的颜色  
						},

						emphasis : {
							label : {
								show : true
							}
						}
					},

					/* data : [
							{name: '北京',value: Math.round(Math.random()*1000)},
							{name: '天津',value: Math.round(Math.random()*1000)},
							{name: '上海',value: Math.round(Math.random()*1000)},
							{name: '重庆',value: Math.round(Math.random()*1000)},
							{name: '河北',value: Math.round(Math.random()*1000)},
							{name: '河南',value: Math.round(Math.random()*1000)},
							{name: '云南',value: Math.round(Math.random()*1000)},
							{name: '辽宁',value: Math.round(Math.random()*1000)},
							{name: '黑龙江',value: Math.round(Math.random()*1000)},
							{name: '湖南',value: Math.round(Math.random()*1000)},
							{name: '安徽',value: Math.round(Math.random()*1000)},
							{name: '山东',value: Math.round(Math.random()*1000)},
							{name: '新疆',value: Math.round(Math.random()*1000)},
							{name: '江苏',value: Math.round(Math.random()*1000)},
							{name: '浙江',value: Math.round(Math.random()*1000)},
							{name: '江西',value: Math.round(Math.random()*1000)},
							{name: '湖北',value: Math.round(Math.random()*1000)},
							{name: '广西',value: Math.round(Math.random()*1000)},
							{name: '甘肃',value: Math.round(Math.random()*1000)},
							{name: '山西',value: Math.round(Math.random()*1000)},
							{name: '内蒙古',value: Math.round(Math.random()*1000)},
							{name: '陕西',value: Math.round(Math.random()*1000)},
							{name: '吉林',value: Math.round(Math.random()*1000)},
							{name: '福建',value: Math.round(Math.random()*1000)},
							{name: '贵州',value: Math.round(Math.random()*1000)},
							{name: '广东',value: Math.round(Math.random()*1000)},
							{name: '青海',value: Math.round(Math.random()*1000)},
							{name: '西藏',value: Math.round(Math.random()*1000)},
							{name: '四川',value: Math.round(Math.random()*1000)},
							{name: '宁夏',value: Math.round(Math.random()*1000)},
							{name: '海南',value: Math.round(Math.random()*1000)},
							{name: '台湾',value: Math.round(Math.random()*1000)},
							{name: '香港',value: Math.round(Math.random()*1000)},
							{name: '澳门',value: Math.round(Math.random()*1000)}
					      ] */
					data : <%=request.getAttribute("content")%>
			     }
			  ]
			};
			//以下的这段代码主要是用来处理用户的选择，应用场景是可以做地图的交互，比如点击地图上的某一个省，获取相应的省的指标变化等。  
            //需要特别注意的是，如果需要点击某一省作地图的操作交互的话，还需要为series属性的每一项添加一个selectedMode属性，这里的属性值为 'single'即单选，也可多选
			var ecConfig = require('echarts/config');
			chinaMapChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {
				var selected = param.selected;
				var selectedProvince;
				var name;
				for ( var i = 0, l = option.series[0].data.length; i < l; i++) {
					name = option.series[0].data[i].name;
					option.series[0].data[i].selected = selected[name];
					if (selected[name]) {
						selectedProvince = name;
						alert(selectedProvince);
					}
				}
				if (typeof selectedProvince == 'undefined') {
					option.series.splice(1);
					option.legend = null;
					option.dataRange = null;
					chinaMapChart.setOption(option, true);
					return;
				}
			});
			return chinaMapChartOption;
		}
    </script>
   </div>
</div>

   

<%@ include file="/page/foot.html" %>
